import React, { Component, PropTypes } from 'react';
import { Form, Icon, Input, Select, Button, Checkbox, message } from 'antd';
import Md5 from 'js-md5';
import { connect } from 'dva'
import Style from './index.less';
import Service from '../service';

const FormItem = Form.Item;
var map, point;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      refuseList: [],
      searchValue: '',
      refuseType: ''
    }
  }
  componentDidMount() {
    let self = this;
    const token = localStorage.getItem('token');
    let videoData = self.props.videoData;
    // console.log(videoData)
    if (videoData && videoData.id) {
      self.setState({
        videoData: videoData
      })
    } else {
      message.error('快递信息不存在，请从视频列表重新进入!', 1.5, function () {
        self.context.router.push(`/usearchnumber`);
      });
      self.messageConfig();
    }
    self.props.getExpressRefuse({
      params: {
        token: token
      },
      func: function (data) {
        if (data) {
          self.setState({
            refuseList: data
          })
        }

      }
    })

    // this.props.queryStatistics({ token: token })
    // this.entityListFun();

  }

  // 返回
  returnFun = () => {
    history.back(-1);
    // this.context.router.push(`/uindex`);
  }
  //  签收
  signFun = () => {

  }
  // 拒签
  nosignFun = () => {
    this.context.router.push(`/ucomment`);
  }
  selectHandleChange = (value) => {
    this.setState({
      refuseType: value
    })
  }
  // 我的
  myUrlFun = () => {
    this.context.router.push(`/umy`);
  }
  /* 控制提示 */
  messageConfig() {
    message.config({
      top: 100, // 消息距离顶部的位置
      duration: 2, // 默认自动关闭延时，单位秒
      maxCount: 1, // 最大显示数, 超过限制时，最早的消息会被自动关闭
    });
  }
  // 拒绝
  refuseSubmit = () => {
    let self = this;
    const token = localStorage.getItem('token');
    if (!self.state.refuseType) {
      message.error('请选择类型');
      self.messageConfig();
      return false;
    }
    if (!self.state.refuseCon) {
      message.error('请填写拒收理由');
      self.messageConfig();
      return false;
    }
    self.props.confirm({
      params: {
        token: token,
        id: self.state.videoData.id,
        status: 2,
        refuse: self.state.refuseCon
      },
      func: function (result) {
        message.success('您已拒收!', 1.5, function () {
          self.context.router.push(`/uvideolist`);
        });
        // Modal.success({
        //   title: '确认签收',
        //   content: '',
        // });
        // this.context.router.push(`/ucomment`);
      }
    })
  }
  refuseConFun = (event) => {
    let v = event.target.value;
    this.setState({
      refuseCon: v
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { refuseList, videoData } = this.state;
    return (
      <div className={Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrow} onClick={this.returnFun}>
              <Icon type="left" />
            </span>
            进行评价
            <span className={Style.arrow + ' ' + Style.arrowText} onClick={this.myUrlFun}>我的</span>
          </div>
        </div>
        <div className={Style.dataWrap}>
          <div className={Style.commentWrap}>
            <div className={Style.commentTitle}>
              <span className={Style.iconred}><Icon type="close-circle" /></span>
              请填写拒签的理由
            <span className={Style.selectTitle + ' ' + Style.selectTitlecm}>
                <Select placeholder="请选择理由" dropdownClassName="selectKd" onSelect={this.selectHandleChange}>
                  <Option value=" ">请选择理由</Option>
                  {refuseList.map((item, index) => {
                    return (
                      <Option value={index}>{item}</Option>
                    )
                  })}
                </Select>
              </span>

            </div>
            <Input type="textarea" value={this.state.refuseCon} rows={8} placeholder="请补充描述拒签理由（可选填，100字以内）" onChange={this.refuseConFun} />
            <dl>
              <dt>请先联系快递员之后   进行提交：</dt>
              <dd>快递员号码：{videoData && videoData.e_bike_mobile} <span className={Style.phone}><Icon type="phone" /></span></dd>
            </dl>

          </div>
          <div className={Style.btn + ' ' + Style.blueBtn + ' ' + Style.mt10} onClick={this.refuseSubmit}>
            提交
          </div>
        </div>
      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  return {
    videoData: state.umodel.videoData
  }
}
function dispatchToProps(dispatch) {
  return {
    getExpressRefuse(payload, params) {
      dispatch({
        type: 'umodel/getExpressRefuse',
        payload
      })
    },
    confirm(payload, params) {
      dispatch({
        type: 'umodel/confirm',
        payload
      })
    },
    urlStatus(payload, params) {
      dispatch({
        type: 'myHome/urlStatus',
        payload
      })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
